<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool系统管理-流媒体配置详细</title>
    <link rel="icon" href="/static/icon.png">
    <link rel="stylesheet" href="/static/base.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>

    <style>
        .media-table {
            margin:0 auto;
            width: 80%
        }
    </style>
</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="sys/server.html"></top-menu>
        </template>
        <template #main>
            <el-container>
                <el-aside width="200px">
                    <sys-menu index="detail.html"></sys-menu>
                </el-aside>
                <el-main>
                    <el-table border stripe class="media-table" :data="mediaTableData" v-loading="tableLoading">
                        <el-table-column prop="key" label="参数" width="300"></el-table-column>
                        <el-table-column prop="value" label="值"></el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </template>

    </layout>

</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/sys-menu.js"></script>
<script src="/static/request.js"></script>
<script>

    new Vue({
        el: '#app',
        data: function() {
            return {
                tableLoading: false,
                mediaTableData: [],
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.loadMediaConfig()
            });
        },
        methods: {
            //加载媒体配置
            loadMediaConfig() {
                this.tableLoading = true
                request.get(`/zl/api/getServerConfig`).then(res => {
                    this.tableLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            //只筛选rtmp的
                            let d = data.data
                            if (d.length === 1) {
                                let mediaConfig = d[0]

                                for (let [k, v] of Object.entries(mediaConfig)){
                                    this.mediaTableData.push({
                                        key: k,
                                        value: v
                                    })
                                }

                            } else {
                                this.mediaTableData = []
                            }
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },
        }
    })

</script>
</html>